// https://vitejs.dev/config/
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
//引入svg图标需要用到插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//mock插件提供方法
import { viteMockServe } from 'vite-plugin-mock'

// 注入的函数参数是一个对象(KV一致): command可以得到工作环境, mode：传入当前的环境模式（如 'development' 或 'production'）
export default defineConfig(({ command, mode }) => {
  //获取各种环境下对应的变量。process.cwd()：获取当前工作目录的路径（以便能找到‘.env.development’ 或 ‘.env.production’）。loadEnv函数返回一个包含环境变量的对象，并将其赋值给 env 变量。
  const env = loadEnv(mode, process.cwd())
  return {
    publicPath: 'https://gitee.com/jch1011/guiguzhenxuan',
    plugins: [
      vue(),
      // 配置svg图标插件
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 图标存放的目录
        symbolId: 'icon-[dir]-[name]', // 图标文件名格式
      }),
      // 配置mock接口插件
      viteMockServe({
        localEnabled: command === 'serve', //保证仅开发阶段可以使用mock接口
      }),
    ],
    resolve: {
      // 配置别名
      alias: {
        '@': path.resolve('./src'), // 使用相对路径配置别名，使 @ 可以代替 src目录, resolve方法返回绝对路径
      },
    },
    //scss的全局变量配置
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
    //代理跨域
    server: {
      proxy: {
        // 定义关键字(发请求时必须以关键字开头, 否则不能跨域请求)。env.VITE_APP_BASE_API在开发环境下是/api（在request.ts中配置的）
        [env.VITE_APP_BASE_API]: {
          //获取数据的服务器地址设置
          target: env.VITE_SERVE,
          //是否需要代理跨域
          changeOrigin: true,
          //路径重写 -- 请求路径去除掉/api
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  }
})
